<!-- 保养日历 -->
<script type="text/html" template>
    <link rel="stylesheet" href='{{ layui.setter.base }}fullcalendar/core/main.css' />
    <link rel="stylesheet" href='{{ layui.setter.base }}fullcalendar/daygrid/main.css' />
    <link rel="stylesheet" href='{{ layui.setter.base }}fullcalendar/timegrid/main.css' />
    <link rel="stylesheet" href='{{ layui.setter.base }}fullcalendar/list/main.css' /> 
    <link rel="stylesheet" href='{{ layui.setter.base }}style/rili.css'  />
</script>
    <div class="mian">
        <div class="boxs">
            <div class="rilselect">
                <form action="" class="layui-form" id='filter' lay-filter="filter">
                    <div class="layui-input-block" style="width: 120px;">
                        <select name="select_rili" lay-verify="required" id="select_rili" lay-filter="select_rili">
                            <option value="0">计划日历</option>
                            <option value="1">工单日历</option>
                        </select>
                    </div>
                </form>
            </div>
            <div style="height: 58px;display: flex;">
                <ul class="oultext_2">
                    <li><span></span>停用</li>
                    <li><span></span>启用</li> 
                </ul>
                <ul class="oultext">
                    <li><span></span>未开始</li>
                    <li><span></span>已完成</li>
                    <li><span></span>未完成</li>
                    <li><span></span>超时</li>
                </ul>
            </div>
        </div>
        <div id='calendar'></div>
    </div>
    <script src='../src/fullcalendar/core/main.js' type="text/javascript"></script>
    <script src='../src/fullcalendar/interaction/main.js' type="text/javascript"></script>
    <script src='../src/fullcalendar/daygrid/main.js' type="text/javascript"></script>
    <script src='../src/fullcalendar/timegrid/main.js' type="text/javascript"></script>
    <script src='../src/fullcalendar/list/main.js' type="text/javascript"></script>
    <script>
        layui.use(['jquery', 'table', 'form', 'laypage', 'layer', 'tree', 'api', 'view'], function () {
            var api = layui.api
            var host = api.host;
            var table = layui.table;
            var view = layui.view;
            var laypage = layui.laypage;
            var setter = layui.setter;
            var $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            layui.sessionData('select_rili', {
                key: 'rilitype',
                value: '0'
            })
            
            form.render();
            form.on('select(select_rili)', function (data) {
                var value = data.value
                layui.sessionData('select_rili', {
                    key: 'rilitype',
                    value: value
                })
                if(value==0){
                    $('.oultext_2').css('display','block')
                    $('.oultext').css('display','none')
                }else{ 
                    $('.oultext_2').css('display','none')
                    $('.oultext').css('display','block')
                }
                calendar.refetchEvents()
            });
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var weekday = new Array(7)
                weekday[0] = "星期天"
                weekday[1] = "星期一"
                weekday[2] = "星期二"
                weekday[3] = "星期三"
                weekday[4] = "星期四"
                weekday[5] = "星期五"
                weekday[6] = "星期六"
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
                customButtons: {
                    myCustomButton: {
                        text: `未完成\n已完成\n未开始`,
                    }
                },
                header: {
                    left: 'today ',
                    center: 'title',
                    right: 'prev,next ,dayGridMonth,dayGridWeek,listDay'
                },
                eventLimitText:'更多',
                noEventsMessage: '这段时间没有任何计划哦~',
                eventLimit: true, // allow "more" link when too many events
                eventLimit: 5,
                buttonText: { today: "今天", month: "月", week: "周", day: "天" },
                // locale :"zh-cn",//多语言  
                locale: 'es',
                axisFormat: 'h(:mm)tt',
                allDaySlot: false,//allday 整天的日程是否显示
                slotEventOverlap: false,//内容不重叠
                slotLabelFormat: [
                    {
                        hour: '2-digit',
                        minute: '2-digit',
                        omitZeroMinute: false,
                        hour12: false,
                        meridiem: 'short'
                    }, 
                ],//左侧展示24小时的时间 
                scrollTime: '08:00',//默认时间
                minTime: '00:00',//最小时间
                maxTime: '24:00',//最大时间 
                eventTimeFormat: { // like '14:30:00' 
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false //设置时间为24小时 
                },
                fixedWeekCount: false,
                timeFormat: { agenda: 'H:mm{-H:mm}', month: 'H:mm' }, // uppercase H for 24-hour clock 时间格式  
                fixedWeekCount: false,
                slotEventOverlap: true, //设置日程视图中的事件是否可以重叠   
                views: {
                    dayGridMonth: {
                        columnHeaderText: function (date) {
                            var d = new Date() 
                            return weekday[date.getDay()]
                        },
                        titleFormat: function (res) {
                            var data = res.date.marker
                            return data.getFullYear() + '年' + (data.getMonth() + 1) + '日';
                        },
                    },
                    dayGridWeek: {
                        titleFormat: function (res) {
                            var start = res.start.marker
                            var end = res.end.marker
                            var startYear = start.getFullYear() + '年'
                            var endYear = end.getFullYear() + '年'
                            var startMonth = (start.getMonth() + 1) + '月'
                            var endMonth = (end.getMonth() + 1) + '月'
                            var wbstart = startMonth + start.getDate() + '日';
                            var wbend = endMonth + end.getDate() + '日';
                            if (start.getFullYear() < end.getFullYear()) {
                                wbend = endYear + wbend
                            }
                            return startYear + wbstart + '–' + wbend;
                        },
                        columnHeaderText: function (date) {
                            var month = date.getMonth() + 1
                            var d = new Date() 
                            return month + '/' + date.getDate() + weekday[date.getDay()]
                        },
                    },
                    listDay: {
                        listDayFormat: function (res) {
                            var date = res.date.marker 
                            return weekday[date.getDay()]
                        },
                        titleFormat: function (res) {
                            var data = res.date.marker
                            return data.getFullYear() + '年' + (data.getMonth() + 1) + '月' + data.getDate() + '日';;
                        },
                    },
                },
                events: function (fetchInfo, callback) {
                    var events = []
                    var url = ''
                    var rilitype = layui.sessionData('select_rili').rilitype
                    var data = null
                    switch (rilitype) {
                        case '0':
                            //计划日历
                            url = api.host + api.byrl.selectMaintainMonthOrWeekParam
                            data = {
                                "endTime": fetchInfo.endStr,
                                "tcPlanType": 'M',
                                "startTime": fetchInfo.startStr,
                            }
                            break;
                        case '1':
                             //工单日历
                            url = api.host + api.byrl.workSheetByMonthOrWeek
                            data = {
                                "endTime": fetchInfo.endStr,
                                "fil04": 'BY',
                                "startTime": fetchInfo.startStr,
                            }
                            break;
                    }
                    var events = [];
                    view.req({
                        url,
                        type: 'POST',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        headers: { 'token': layui.sessionData(setter.tableName).token },
                    })
                        .done(function (res) {
                            if (res.code == '0') {
                                var odata = res.data
                                if (rilitype == '1') {
                                    for (var i = 0; i < odata.length; i++) {
                                        var textColor = ''
                                        switch (odata[i].fil05) {
                                            case '0':
                                                textColor = '#FF5300';
                                                break;
                                            case '1':
                                            case '2':
                                            case '3':
                                            case '4':
                                            case '5':
                                            case '6':
                                                textColor = '#3D8CC9';
                                                break;
                                            case '7':
                                                textColor = 'red';
                                                break;
                                            case '8':
                                            case '9':
                                                textColor = '#009F3C';
                                                break;
                                        }
                                        events.push({
                                            id: odata[i].tcPlanId ? odata[i].tcPlanId : 0,
                                            title: odata[i].tcReqName,
                                            start: odata[i].fil12,
                                            end: odata[i].fil13 != '' && odata[i].fil13 != null ? odata[i].fil13 : fetchInfo.endStr,
                                            fil05: odata[i].fil05,
                                            tcPlanStatus: odata[i].tcPlanStatus,
                                            tcPlanId: odata[i].tcReqId,
                                            color: '#F7F7F7',
                                            textColor: textColor, // an option!
                                            backgroundColor: '#F7F7F7',
                                            allDayDefault: false,
                                            allDay: false,
                                        })
                                    }
                                } else {
                                    for (var i = 0; i < odata.length; i++) {
                                        var textColor = ''
                                        switch (odata[i].tcPlanStatus) {
                                            case '0':
                                                textColor = '#009F3C';
                                                break;
                                            case '1':
                                                textColor = '#3D8CC9'; 
                                                break; 
                                        }
                                        events.push({
                                            title: odata[i].tcPlanName,
                                            start: odata[i].tcPlanStart,
                                            end: odata[i].tcPlanEnd ? odata[i].tcPlanEnd : '',
                                            tcPlanStatus: odata[i].tcPlanStatus,
                                            fil05: odata[i].fil05,
                                            tcPlanId: odata[i].tcPlanId,
                                            textColor: textColor,
                                            allDayDefault: false,
                                            allDay: false, color: '#F7F7F7', 
                                            backgroundColor: '#F7F7F7',
                                        })
                                    }
                                }
                                callback(events);
                            } else {
                                callback(events);
                            }
                        })

                },
                eventClick: function (info) {  
                    if (calendar.view.type != 'listDay') {
                        calendar.changeView('listDay', info.event.start)
                    } else {
                        var el = info.el
                        var rilitype = layui.sessionData('select_rili').rilitype
                        var info_dats = info.event._def.extendedProps
                        var tcPlanId = info_dats.tcPlanId
                        if (rilitype == '0') {
                            $(el).attr("lay-href", "maintain/branch-one/details-two/planId=" + tcPlanId + "/tcPlanStatus=" + info_dats.tcPlanStatus);

                        } else {
                            location.hash = '/maintain/popup/create_work#?id=' + tcPlanId
                        }
                    }
                },
                eventRender: function (info) {
                    var view = calendar.view;
                    if (view.type == 'listDay') {
                        var hour = info.event.start.getHours() > 9 ? info.event.start.getHours() : '0' + info.event.start.getHours()
                        var Minutes = info.event.start.getMinutes() > 9 ? info.event.start.getMinutes() : '0' + info.event.start.getMinutes()
                        var time = (hour + ':' + Minutes)
                        var textColor=info.event.textColor 
                        var divhtml = `<div class='daylist'><span>` + time + `</span><span style="color:`+textColor+`">` + info.event.title + `</span></div>`
                        $(info.el).html(divhtml)
                    }
                }, 
                datesRender: function (info) {
                    var view = calendar.view;
                }, 
            });
            calendar.render(); 
        }) 
    </script>